<template>
	<view class="my">
		<!-- 登录 -->
		<view class="denglu">
			<view class="touxiang" @click="toLogin">
				<view class="login">
					<u-image width="120rpx" height="120rpx" shape="circle" src="/static/dome/touxiang.jpg">
					</u-image>
					<text class="liji">立即登录</text>
				</view>
				<u-icon class="icon" name="arrow-right"></u-icon>
			</view>
		</view>

		<view class="main">
			<!-- 关注 -->
			<u-grid :col="4" class="guanzhu" :border="false">
				<u-grid-item @click="tomySell">
					<u-icon name="integral" :size="46"></u-icon>
					<view class="grid-text">我的出售</view>
				</u-grid-item>
				<u-grid-item @click="tomyBuy">
					<u-icon name="bag" :size="46"></u-icon>
					<view class="grid-text">我的出租</view>
				</u-grid-item>
				<u-grid-item @click="tonews">
					<u-icon name="tags" :size="46"></u-icon>
					<view class="grid-text">我的消息</view>
				</u-grid-item>
				<u-grid-item @click="tomyColl">
					<u-icon name="heart" :size="46"></u-icon>
					<view class="grid-text">我的收藏</view>
				</u-grid-item>
			</u-grid>
			<!-- 订单 -->
			<view class="guanli">
				<view class="dingdan">
					<text class="ding1">订单管理</text>
					<text class="ding2">全部订单<u-icon name="arrow-right"></u-icon></text>
				</view>
				<u-grid :col="4" :border="false">
					<u-grid-item>
						<u-icon name="rmb-circle" :size="46"></u-icon>
						<view class="grid-text">待付款</view>
					</u-grid-item>
					<u-grid-item>
						<u-icon name="car" :size="46"></u-icon>
						<view class="grid-text">待发货</view>
					</u-grid-item>
					<u-grid-item>
						<u-icon name="shopping-cart" :size="46"></u-icon>
						<view class="grid-text">待收货</view>
					</u-grid-item>
					<u-grid-item>
						<u-icon name="calendar" :size="46"></u-icon>
						<view class="grid-text">已成交</view>
					</u-grid-item>
				</u-grid>
			</view>
			<!--保证金  -->
			<view class="baozheng">
				<view class="baozhengjin" @click="tointegral">
					<view>
						<u-icon name="checkmark-circle" size="34rpx"></u-icon>
						<text class="tex">我的积分</text>
					</view>
					<u-icon class="icon" name="arrow-right"></u-icon>
				</view>
				<view class="baozhengjin" @click="toinfo">
					<view>
						<u-icon name="chat" size="34rpx"></u-icon>
						<text class="tex">社区评论</text>
					</view>
					<u-icon class="icon" name="arrow-right"></u-icon>
				</view>
				<view class="baozhengjin">
					<view>
						<u-icon name="server-fill" size="34rpx"></u-icon>
						<text class="tex">在线客服</text>
					</view>
					<u-icon class="icon" name="arrow-right"></u-icon>
				</view>
				<view class="baozhengjin">
					<view>
						<u-icon name="file-text" size="34rpx"></u-icon>
						<text class="tex">隐私政策</text>
					</view>
					<u-icon class="icon" name="arrow-right"></u-icon>
				</view>
			</view>

			<!-- 经纪人 -->
			<view class="yunlian">
				<view>
					<u-icon name="account" size="34rpx"></u-icon>
					<text class="tex">云联经纪人</text>
				</view>
				<u-icon class="icon" name="arrow-right"></u-icon>
			</view>
		</view>

		<cust-tab :current="4"></cust-tab>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			toLogin() {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			},
			tomySell() {
				uni.navigateTo({
					url: "/pages/my/mySell"
				})
			},
			tomyBuy() {
				uni.navigateTo({
					url: "/pages/my/myBuy"
				})
			},
			tomyColl() {
				uni.navigateTo({
					url: "/pages/my/myColl"
				})
			},
			// 跳转到消息
			tonews() {
				uni.navigateTo({
					url: "/pages/news/news"
				})
			},
			// 跳转到积分
			tointegral() {
				uni.navigateTo({
					url: "/pages/integral/integral"
				})
			},

			toinfo() {
				uni.navigateTo({
					url: "/pages/info/info"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my {
		background-color: #f6f7f9;

		// 登录
		.denglu {
			position: relative;
			height: 320rpx;

			background: linear-gradient(to right top, #f8fff9, #ffb3b4);

			.touxiang {
				width: 100%;
				padding: 20rpx;
				position: absolute;
				bottom: 20rpx;
				left: 0;
				display: flex;
				justify-content: space-between;

				.login {
					display: flex;
					align-items: center;

					.liji {
						font-size: 32rpx;
						margin-left: 30rpx;
						z-index: 10;
					}
				}

				.icon {
					color: #a79f9f;
				}

			}
		}

		.main {

			padding: 0 20rpx 20rpx;

			// 关注
			.guanzhu {
				border-radius: 20rpx;
				height: 160rpx;
				background-color: #fff;
			}

			// 订单
			.guanli {
				background-color: #fff;
				border-radius: 20rpx;
				margin: 20rpx 0;

				.dingdan {
					height: 100rpx;
					line-height: 100rpx;
					padding: 0 20rpx;
					border-bottom: 2px solid #f6f7f9;
					display: flex;
					justify-content: space-between;

					.ding1 {
						font-size: 32rpx;
						font-weight: 700;
					}

					.ding2 {
						font-size: 24rpx;
						color: #b3b8b8;
					}
				}

			}

			// 保证金
			.baozheng {
				height: 420rpx;
				border-radius: 20rpx;
				background-color: #fff;
				padding: 20rpx;

				.baozhengjin {
					height: 100rpx;
					line-height: 100rpx;
					display: flex;
					justify-content: space-between;

					.icon {
						color: #b3b8b8;
					}

					.tex {
						margin-left: 20rpx;
					}
				}
			}

			// 经纪人
			.yunlian {
				margin-top: 20rpx;
				height: 100rpx;
				line-height: 100rpx;
				padding: 0 20rpx;
				display: flex;
				justify-content: space-between;
				background-color: #fff;

				.icon {
					color: #b3b8b8;
				}

				.tex {
					margin-left: 20rpx;
				}
			}

		}

	}
</style>
